<template>
  <div>
    <el-form :inline="true" :model="formData1" label-width="80px">
      <el-form-item label="库位编号">
        <el-input
          disabled
          v-model="formData1.warehouseNumber"
          placeholder="请输入"
        ></el-input>
      </el-form-item>
      <el-form-item label="库位名称">
        <el-input
          v-model="formData1.warehouseName"
          placeholder="请输入"
        ></el-input>
      </el-form-item>
      <el-form-item label="仓库" style="width: 200px">
        <el-select v-model="formData1.WHouseId" placeholder="请选择">
          <el-option
            v-for="items in Shopinfo"
            :label="items.wHouseName"
            :value="items.wHouseId"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="GetWarehouse1()">查询</el-button>
        <el-button @click="resetFilter">重置</el-button>
        <el-button
          type="danger"
          @click="dels()"
          :disabled="selectedRows.length === 0"
          >批量删除</el-button
        >
        <el-button type="success" @click="SetFarmingInformation3()"
          >添加</el-button
        >
      </el-form-item>
    </el-form>
    <el-checkbox v-model="isAllChecked">全选</el-checkbox>
    <el-checkbox v-model="isAllUnchecked">反选</el-checkbox>
    <div class="table-container">
      <el-table
        @selection-change="handleSelectionChange"
        :data="tableData"
        border
        style="width: 1500px"
      >
        <el-table-column type="selection"></el-table-column>
        <el-table-column prop="warehouseId" label="编号"></el-table-column>
        <el-table-column
          prop="warehouseNumber"
          label="库位编号"
        ></el-table-column>
        <el-table-column
          prop="warehouseName"
          label="库位名称"
        ></el-table-column>
        <el-table-column
          prop="wHouseTypeName"
          label="库位类型"
        ></el-table-column>
        <el-table-column prop="wHouseName" label="仓库"></el-table-column>
        <el-table-column label="是否禁用">
          <template #default="scope">
            {{ formatBoolean(scope.row.defaultnot) }}
          </template>
        </el-table-column>
        <el-table-column label="是否默认">
          <template #default="scope">
            {{ formatBoolean(scope.row.disable) }}
          </template></el-table-column
        >
        <el-table-column label="操作">
          <template #default="scope">
            <el-button type="text" size="small" @click="handleEdit(scope.row)"
              >编辑</el-button
            >
            <el-button
              type="text"
              size="small"
              @click="handleDelete(scope.row.warehouseId)"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>

      <div class="demo-pagination-block">
        <el-pagination
          v-model:current-page="form.PageIndex"
          v-model:page-size="form.PageSize"
          :page-sizes="[1, 3, 15, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="form.TotalCount"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
        <el-dialog
          ref="dialogRef"
          title="库位修改"
          v-model="dialogVisible"
          width="800px"
        >
          <div style="margin-bottom: 20px; color: red">* 为必填项</div>
          <el-form ref="formRef" :model="formData" label-width="200px">
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="库位编号">
                  <el-input
                    placeholder="可不填写，自动生成"
                    style="width: 350px"
                    v-model="formData.warehouseNumber"
                    readonly
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="仓库">
                  <el-select v-model="formData.wHouseId" placeholder="请选择">
                    <el-option
                      v-for="items in Shopinfo"
                      :label="items.wHouseName"
                      :value="items.wHouseId"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="仓库名称">
                  <el-input
                    v-model="formData.warehouseName"
                    placeholder="1号仓库"
                  ></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="库位类型">
                  <el-select
                    v-model="formData.wHouseTypeId"
                    placeholder="请选择"
                  >
                    <el-option
                      v-for="items in wHouseTypeinfo"
                      :label="items.wHouseTypeName"
                      :value="items.wHouseTypeId"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="12">
                <el-form-item label="是否默认">
                  <el-checkbox v-model="formData.defaultnot"></el-checkbox>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="是否禁用">
                  <el-checkbox v-model="formData.disable"></el-checkbox>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
          <template #footer>
            <span class="dialog-footer">
              <el-button @click="dialogVisible = false">取消</el-button>
              <el-button type="primary" @click="submitForm()">修改</el-button>
            </span>
          </template>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ElMessageBox, ElTable, ElMessage } from "element-plus";
import { reactive, onMounted, ref } from "vue";
import axios from "axios";
import { Plus } from "@element-plus/icons-vue";
import { useRouter, useRoute } from "vue-router";
import { KongaUrl } from "@/axios/axiosHelp";
const router = useRouter();
const formatBoolean = (value) => (value ? "是" : "否");
//查询表单
const formData1 = reactive({
  warehouseNumber: "",
  warehouseName: "",
  WHouseId: "",
});
const formData = reactive({
  WarehouseId: 0,
  warehouseNumber: "",
  warehouseName: "",
  wHouseId: "",
  wHouseTypeId: "",
  defaultnot: false,
  disable: false,
  isdelete: false,
});
//仓库类型
const Shopinfo = <any>ref([]);
const GetWhouse = () => {
  KongaUrl("/wangcong/api/Whouase/GetWhouse").then((res) => {
    Shopinfo.value = res.data.data;
  });
};
//库位类型
const wHouseTypeinfo = <any>ref([]);
const GetwHouseType = () => {
  KongaUrl("/wangcong/api/Whouase/GetWHouseType").then((res) => {
    wHouseTypeinfo.value = res.data.data;
  });
};
//#region 分页
const handleSizeChange = (newSize) => {
  form.PageSize = newSize;
  GetWarehouse1();
};

const handleCurrentChange = (newPage) => {
  form.PageIndex = newPage;
  GetWarehouse1();
};
//#endregion
//获取库位列表
const form = reactive({
  TotalCount: 0,
  PageCount: 0,
  PageSize: 15,
  PageIndex: 1,
});
const tableData = ref([]);
const GetWarehouse1 = () => {
  KongaUrl.get("/wangcong/api/Whouase/GetWarehouse", {
      params: {
        WarehouseNumber: formData1.warehouseNumber,
        WarehouseName: formData1.warehouseName,
        WHouseId: formData1.WHouseId,
        PageSize: form.PageSize,
        PageIndex: form.PageIndex,
      },
    })
    .then((res) => {
      tableData.value = res.data.data.list;
      form.TotalCount = res.data.data.totalCount;
      form.PageCount = res.data.data.pageCount;
    });
};
//删除
const handleDelete = (warehouseId: any) => {
  ElMessageBox.confirm("是否确认删除?", "提示", {
    confirmButtonText: "是",
    cancelButtonText: "否",
    type: "warning",
  }).then(() => {
    KongaUrl.delete("/wangcong1/api/WHouase/DelWhouse", {
        params: {
          WarehouseId: warehouseId,
        },
      })
      .then((res) => {
        if (res.data.code == 500) {
          ElMessage.success(res.data.message);
          GetWarehouse1();
        } else {
          ElMessage.error(res.data.message);
        }
      });
  });
};
//批量删除
const dels = () => {
  if (selectedRows.value.length > 0) {
    ElMessageBox.confirm("是否确认批量删除?", "提示", {
      confirmButtonText: "是",
      cancelButtonText: "否",
      type: "warning",
    }).then(() => {
      KongaUrl.delete("/wangcong1/api/WHouase/DelsWhouse", {
          params: {
            Id: selectedRows.value,
            Table: "WarehouseModel",
            ziduan: "WarehouseId",
          },
          paramsSerializer: {
            indexes: null, // 确保数组格式为Id=1&Id=2
          },
        })
        .then((res) => {
          if (res.data.code == 500) {
            ElMessage.success(res.data.message);
            GetWarehouse1();
          } else {
            ElMessage.error(res.data.message);
          }
        });
    });
  }
};
//反填
const handleEdit = (row: any) => {
  //     storagelocationForm.storageLocationId = row.storageLocationId,
  //     storagelocationForm.storageLocationNo = row.storageLocationNo,
  //     storagelocationForm.storageLocationName = row.storageLocationName,
  //     storagelocationForm.superiorWareHouse = row.superiorWareHouse,
  //     storagelocationForm.storageLocationType = row.storageLocationType,
  //     storagelocationForm.isDisable = row.isDisable,
  //     storagelocationForm.isDefault = row.isDefault,
  //     UpdatedialogVisible.value = true
  (formData.WarehouseId = row.warehouseId),
    (formData.defaultnot = row.defaultnot),
    (formData.disable = row.disable),
    (formData.isdelete = row.isdelete),
    (formData.wHouseId = row.wHouseId),
    (formData.wHouseTypeId = row.wHouseTypeId),
    (formData.warehouseName = row.warehouseName),
    (formData.warehouseNumber = row.warehouseNumber),
    (dialogVisible.value = true);
};
//修改
const submitForm = () => {
  KongaUrl.put("/wangcong1/api/WHouase/UPdateWhouse", formData)
    .then((res) => {
      if (res.data.code == 300) {
        ElMessage.success(res.data.message);
      } else {
        ElMessage.error(res.data.message);
      }
    });
};
const dialogVisible = ref(false);
const SetFarmingInformation3 = () => {};
// 存储选中的行数据（ID数组）
const selectedRows = ref<number[]>([]);

// 处理选中变化
const handleSelectionChange = (rows: any[]) => {
  selectedRows.value = rows.map((row) => row.warehouseId); // 直接提取ID
};

// 全选和反选状态
const isAllChecked = ref(false);
const isAllUnchecked = ref(false);

const handleFilter = () => {
  // 这里添加筛选逻辑，例如发送API请求
  ElMessage.success("筛选成功");
};

const resetFilter = () => {
  formData1.warehouseNumber = "";
  formData1.warehouseName = "";
  formData1.WHouseId = "";
};
onMounted(() => {
  GetWarehouse1();
  GetWhouse();
  GetwHouseType();
});
</script>

<style scoped>
.filter-container {
  margin-bottom: 20px;
}

.table-container {
  width: 100%;
}

.table-operations {
  margin-top: 10px;
  text-align: right;
}
</style>